<template>
    <el-dialog v-if="dialogVisible" :close-on-click-modal='false' title="手动清除计划" :visible.sync="dialogVisible" @close="resetForm()" width="428px">
        <div class="clear_box">
            <div class="pro_name">项目名称：{{title}}</div>
            <div class="clear_tips">选择下方条件进行清除，符合条件下的所有计划都将清除！</div>
        </div>
        <div class="tabar_list flexbox flexcenter">
            <div class="tabar_item" :class="{'active':active==1}" @click="swichData(1)">一阶测试</div>
            <div class="tabar_item" :class="{'active':active==2}" @click="swichData(2)">二阶测试</div>
        </div>
        <div class="plan_box" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
            <el-checkbox-group v-model="oneList" class="clear_check" v-if="active==1" key="1">
                <el-checkbox :label="item.id" v-for="(item,index) in tableData.one" :key="item.id">
                    <div class="plan_check">
                        <img src="../../assets/img/market_checked.svg" alt="" class="is_check" />
                        <div class="plan_index">条件{{index+1}}</div>
                        <div class="plan_text">
                            计划创建时间 {{item.create_day}} 天前，
                            账户近 {{item.recentlyday}} 天内，
                            <template v-if="item.del_type==1">专业计划</template>
                            <template v-else-if="item.del_type==2">放量计划</template>
                            <template v-else-if="item.del_type==3">所有计划</template>
                            累计消耗大于￥{{item.cost}}，且 ROI 低于 {{item.roi}}
                        </div>
                    </div>
                </el-checkbox>
            </el-checkbox-group>
            <el-checkbox-group v-model="twoList" class="clear_check" v-else-if="active==2" key="2">
                <el-checkbox :label="item.id" v-for="(item,index) in tableData.two" :key="item.id">
                    <div class="plan_check">
                        <img src="../../assets/img/market_checked.svg" alt="" class="is_check" />
                        <div class="plan_index">条件{{index+1}}</div>
                        <div class="plan_text">
                            计划创建时间 {{item.create_day}} 天前，
                            账户近 {{item.recentlyday}} 天内，
                            <template v-if="item.del_type==1">专业计划</template>
                            <template v-else-if="item.del_type==2">放量计划</template>
                            <template v-else-if="item.del_type==3">所有计划</template>
                            累计消耗大于￥{{item.cost}}，且 ROI 低于 {{item.roi}}
                        </div>
                    </div>
                </el-checkbox>
            </el-checkbox-group>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="resetForm()" class="el-button-width">取 消</el-button>
            <el-button size="small" type="primary" @click="submitForm()" :disabled="loading" :loading="loading" class="el-button-width">保 存</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            title:"",
            active:1,
            loading: false,
            dialogVisible: false,
            queryInfo: {
                id: null,
            },
            oneList:[],
            twoList:[],
            tableData: {},
        };
    },
    created() {
        
    },
    methods: {
        getData(row) {
            this.dialogVisible = true;
            this.queryInfo.id = row.id
            this.title = row.name
            this.getPlanList();
        },
        swichData(index){
            this.active = index
        },
        //获取列表
        async getPlanList() {
            this.loading = true;
            const { data: res } = await this.$http.post(
                "videotest/Probject/cleanPage",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.tableData = res.data;
            }
        },

        // 提交
        async submitForm() {
            let checkList= this.oneList.concat(this.twoList)
            if (checkList.length <= 0) {
                this.$message.error("请选择条件");
                return;
            }
            this.loading = true;
            const { data: res } = await this.$http.post(
                "videotest/Probject/cleanPlan",
                {
                    id: checkList,
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                this.loading = false;
                return;
            } else {
                this.$message({
                    message: "清除成功",
                    type: "success",
                });
                this.loading = false;
                this.resetForm();
                this.$emit("getDataList", 1);
            }
        },

        // 关闭重置表单
        resetForm() {
            this.checkList = [];
            this.oneList = []
            this.twoList = []
            this.tableData = {};
            this.dialogVisible = false;
        },
    },
    components: {},
};
</script>


<style scoped>
.plan_box {
    height: 400px;
    overflow-y: auto;
    margin: 0 -20px;
    padding: 0 20px;
}
/deep/ .clear_check .el-checkbox {
    margin-right: 0;
}
/deep/ .clear_check .el-checkbox__input {
    display: none;
    width: 0;
    height: 0;
    visibility: hidden;
    position: absolute;
    right: 0;
    top: 0;
}
/deep/ .clear_check .el-checkbox__label {
    padding-left: 0;
}
.plan_check {
    padding: 12px;
    border: 1px solid #ebebeb;
    border-radius: 6px;
    margin-top: 12px;
    position: relative;
    overflow: hidden;
}
.is_check {
    position: absolute;
    top: 0;
    right: 0;
    display: none;
}
.plan_index {
    font-size: 14px;
    color: #17233d;
    line-height: 20px;
}
.plan_text {
    font-size: 14px;
    line-height: 20px;
    margin-top: 8px;
    white-space: initial;
}
/deep/ .clear_check .el-checkbox.is-checked .is_check {
    display: block;
}
/deep/ .clear_check .el-checkbox.is-checked .plan_check {
    background: rgba(68, 117, 255, 0.05);
    border: 1px solid #4475ff;
}
.clear_box {
    padding: 12px;
    border-radius: 6px;
    background: rgba(165, 177, 209, 0.05);
}
.pro_name {
    font-size: 14px;
    color: #17233d;
    line-height: 20px;
}
.clear_tips {
    font-size: 14px;
    color: #b4b7bd;
    line-height: 20px;
    margin-top: 4px;
}
.tabar_item {
    font-size: 14px;
    color: #616c85;
    height: 48px;
    line-height: 48px;
    position: relative;
    margin-right: 40px;
    cursor: pointer;
}
.tabar_item.active {
    color: #4475ff;
}
.tabar_item.active::after {
    content: "";
    position: absolute;
    height: 2px;
    background-color: #4475ff;
    bottom: 0;
    left: 0;
    right: 0;
}
</style>
